import React from 'react';
import { CommonInterface, JSXPropsInterface } from '../../interfaces/common.interface';
import classNames from 'classnames';
import { polyfill } from 'react-lifecycles-compat';
import { typeReplace } from '../../utils/muguetDash';
import { handleSize, JSXProps } from '../../utils/handleJSXProps';
import Icon from '../icon/icon';
import './style/gradientsBar.css';
import { SizeType } from '../../interfaces/types';

type alertTypeInterface = 'danger' | 'success' | 'information' | 'notice';
var currentTimeout;
const customGradientsBarAttr = [
	'gradients',
	'type',
	'size',
	'duration',
	'display',
	'onCancel',
	'style',
	'children'
]

interface GradientsBarProps extends CommonInterface {
	gradients?: string;
	type?: alertTypeInterface;
	duration?: number;
	onCancel?: Function;
	series?: Array<string>;
}

class GradientsBar extends React.Component<GradientsBarProps, any> {

	private static readonly defaultProps = {
		duration: 3500,
	}

	constructor(props) {
		super(props);
	}

	handleExtraProps = (): JSXPropsInterface<GradientsBarProps> => {
		const iconProps = JSXProps<GradientsBarProps>(this.props, customGradientsBarAttr);
		const { customProps } = iconProps;
		customProps.size = handleSize(customProps.size as SizeType);
		return iconProps;
	}

	handleClassName = (classProps) => {
		const { gradients, type, display } = classProps;
		return classNames({
			'm-gradientsBar-default': true,
			'm-gradientsBar-alert-default': type,
			[`m-gradients-${gradients}`]: gradients,
			[`m-gradientsBar-alert-${type}`]: type,
			[`m-gradientsBar-alert-${display ? 'vision' : 'hidden'}`]: type,
		});
	}

	EmbedChild = (props): React.ReactNode => {
		return (
			props.type ?
				<div className='m-gradientsBar-alert-inner'>
					<Icon src={
						require(`../../assets/icons/local/${props.type}.svg`)
					}
					></Icon>
					<div
						className='m-gradientsBar-alert-content'
					>{props.children}</div>
					<div className='m-gradientsBar-alert-cancel'
						onClick={props.onCancel}
					></div>
				</div> : props.children
		)
	}

	render() {
		const { nativeProps, customProps } = this.handleExtraProps();
		const className = this.handleClassName(customProps);

		customProps.display && customProps.duration! > 0 ?
			currentTimeout = setTimeout(customProps.onCancel!, customProps.duration) :
			clearTimeout(currentTimeout);

		const mergeStyle = {
			...typeReplace(customProps.size as SizeType, 'Object', {}),
			...typeReplace(customProps.style as Object, 'Object', {})
		}

		return (
			<div
				{...nativeProps}
				className={className}
				style={mergeStyle}
			>{this.EmbedChild(customProps)}</div>
		)
	}
}

polyfill(GradientsBar);
export default GradientsBar;
